<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<!-- 动画操作  针对页面弹出效果
		   show()     功能：显示效果     本质: display:block
		   hide()     功能：隐藏效果     本质: display:none
		   
		   slideDown()    功能：(滑动式)向下效果
		   slideUp()      功能：(滑动式)向上效果
		   
		   fadein(毫秒数)       功能：读入效果
		   fadeout(毫秒数)      功能：读出效果
		   
		   hover()        功能：悬停切换效果
		 -->
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background: lightgreen;
				 display: none;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="sd">(滑动式)向下效果</button>
		<button id="sp">(滑动式)向上效果</button>
		<button id="fi">读入效果</button>
		<button id="ft">读出效果</button>
		
		<div></div>
		
		<script>
			/* 1.显示和隐藏效果 */
			$("#show").click(function(){
				$("div").show();
			});
			/* 1.显示和隐藏效果 */
			$("#hide").click(function(){
				$("div").hide();
			});
			/* 2. (滑动式)向上效果和向下效果*/
			$("#sd").click(function(){
				$("div").slideDown();
			});
			$("#sp").click(function(){
				$("div").slideUp();
			});
			/* 3.淡入和淡出 */
			$("#fi").click(function(){
				$("div").fadeIn();
			});
			$("#ft").click(function(){
				$("div").fadeOut();
			});
			
			//大作业：tab选项卡      ---BOM吸顶灯
		</script>
	</body>
</html>